<template>
  <div class="d-flex">
    <div class="article-type flex-fill d-flex flex-column pa-2">
      <div class="text-center pb-3 font-size-body-1">文章类型</div>
      <div class="type-item" v-for="item in typeApi.tableState.dataSource">
        <el-dropdown class="fill-width" trigger="contextmenu">
          <div class="d-flex fill-width">
            <el-button class="fill-width" :class="{'active-item':state.active == item.id}" @click="onType(item)">
              <div class="mr-2" style="width: 6px;height: 6px;border-radius: 100%;" :style="{backgroundColor:item.color}"></div>
              <div>{{ item.name }}</div>
            </el-button>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="typeApi.onEdit(item.id)">编辑</el-dropdown-item>
              <el-dropdown-item @click="typeApi.onDelete(<string>item.id)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
      <div>
        <el-button class="fill-width" text @click="typeApi.onCreate()">创建</el-button>
      </div>
    </div>

    <div class="i-page article-page">
      <div class="i-content white pa-0 d-flex flex-column">
        <el-space :alignment="'stretch'" direction="horizontal" fill size="large">
          <el-space>
            <el-button plain type="primary" @click="api.onCreate()">创建</el-button>
          </el-space>
          <el-table
            :data="api.tableState.dataSource"
            border
          >

            <el-table-column label="标题" prop="title" />
            <el-table-column label="副标题" prop="subTitle" />
            <el-table-column label="类型" prop="articleType.name" />
            <el-table-column label="关键字" prop="keywords" />
            <el-table-column label="是否发布" prop="enable" >
              <template #default="{ row, column, $index }">
                {{row.enable?'发布':'隐藏'}}
              </template>
            </el-table-column>

            <el-table-column :align="'center'" fixed="right" label="操作" width="280">
              <template #default="{ row, column, $index }">
                <el-space>
                  <el-button size="small" text type="primary" @click="api.onDetail(row.id)">详情</el-button>
                  <el-button v-if="row.parentId !== '0'" size="small" text type="primary" @click="api.onEdit(row.id)">编辑</el-button>
                  <el-button size="small" text type="danger" @click="api.onDelete(row.id)">删除</el-button>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
          <div class="d-flex justify-end">
            <el-pagination
              v-model:current-page="api.tableState.pagination.current"
              v-model:page-size="api.tableState.pagination.pageSize"
              :total="api.tableState.pagination.total"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="api.refreshTable()"
              @current-change="api.refreshTable()"
            />
          </div>
        </el-space>
      </div>

      <Create :api="api" :typeApi="typeApi"/>
      <Edit :api="api" :typeApi="typeApi"/>
      <Detail :api="api" />

      <CreateType :api="typeApi" />
      <EditType :api="typeApi" />
    </div>

  </div>
</template>

<script lang="ts" setup>
import { onMounted, provide, reactive } from "vue";
import { ArticleApi, ArticleTypeApi } from "~/api/system/article/article.api";
import Create from "~/views/system/article/Create.vue";
import Edit from "~/views/system/article/Edit.vue";
import Detail from "~/views/system/article/Detail.vue";
import CreateType from "~/views/system/articleType/Create.vue";
import EditType from "~/views/system/articleType/Edit.vue";

const api = new ArticleApi();
const typeApi = new ArticleTypeApi();
const state = reactive({
  active: "",
});

function onType(item: any) {
  if (state.active == item.id) {
    state.active = "";
    api.filterTable({ typeId: "" });
  } else {
    state.active = item.id;
    api.filterTable({ typeId: item.id });
  }

}

onMounted(() => {
  api.onListPage();
  typeApi.tableState.pagination.pageSize = 10000;
  typeApi.onListPage();
});
</script>

<style lang="scss" scoped>
.article-page {
  width: fit-content;
}

.article-type {
  width: 240px !important;
  height: calc(100vh - 96px);
  border-right: 1px solid var(--el-border-color);

  .type-item {
    margin-bottom: 12px;

  }
}

.active-item {
  background-color: var(--el-button-hover-bg-color);
  border-color: var(--el-button-hover-border-color);
  color: var(--el-button-hover-text-color);
}
</style>
